import React, {CSSProperties} from 'react';
import {TabBar} from 'antd-mobile';

import {connect} from "react-redux";
import {Dispatch} from "redux";
import {StateType} from "../redux/reducers/main";
import Home from "../pages/home";
import Cart from "../pages/cart";
import Product from "../pages/product";
import Mine from "../pages/mine";


interface ButtonIconProps {
    className: string,
    selected?: boolean
}

const BottomIcon: React.FC<ButtonIconProps> = (params) => {

    const styles: CSSProperties = {fontSize: 30};

    if (params.selected) {
        styles.color = '#302F34';
    }

    return (
        <i className={`iconfont ${params.className}`} style={styles}/>
    );
};

interface Props {
    dispatch: Dispatch,
    main: StateType
}


const TabsData = [
    {
        title: "首页",
        key: "home",
        icon: "icon-home-fill",
        component: <Home/>
    },
    {
        title: "购物车",
        key: "cart",
        icon: "icon-shopping-fill",
        component: <Cart/>
    },
    {
        title: "商品",
        key: "product",
        icon: "icon-database-fill",
        component: <Product/>
    },
    {
        title: "我的",
        key: "mine",
        icon: "icon-user",
        component: <Mine/>
    },
];

class Main extends React.Component<Props> {
    render() {
        const {dispatch, main: {selectedTab}} = this.props;
        return (
            <div style={{position: 'fixed', height: '100%', width: '100%', top: 0, backgroundColor: 'white'}}>
                <TabBar
                    unselectedTintColor="#949494"
                    tintColor="#33A3F4"
                    barTintColor="white"
                    prerenderingSiblingsNumber={0}
                >
                    {
                        TabsData.map((item) => {
                            return (
                                <TabBar.Item
                                    title={item.title}
                                    key={item.key}
                                    icon={<BottomIcon className={item.icon}/>}
                                    selectedIcon={<BottomIcon className={item.icon} selected={true}/>}
                                    selected={selectedTab === item.key}
                                    onPress={() => {
                                        dispatch({
                                            type: 'changeTab',
                                            payload: item.key
                                        });
                                    }}
                                >
                                    {item.component}
                                </TabBar.Item>
                            )
                        })
                    }
                </TabBar>
            </div>
        );
    }
}

const mapDispatchToProps = (dispatch: Dispatch) => { // 默认传递参数就是dispatch
    return {
        dispatch
    };
};
export default connect((state: Props) => ({
    main: state.main
}), mapDispatchToProps)(Main)
